<template>
	<view class="page">
		<!-- <up-navbar title="百霸智育" @rightClick="{}" :autoBack="true" bgColor="#f1f1f1" placeholder></up-navbar> -->
		<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
		<!-- 没有刷词 -->
		<view v-if="!list&&loading||list.length == 0&&loading"
			class="content flex column items-center box-sizing padding-30">
			<view class="width-full height-120"></view>
			<up-image mode="widthFix" :show-loading="true" :src="logo" width="200rpx" height="200rpx"></up-image>
			<view class="marginTop-30 fontSize-28" style="line-height: 50rpx;">
				{{info.grade_id>9?'高中3500':info.grade_id<7?'小学':'初中1800'}}必背单词，熟悉词多少单词你知道吗？
				刷单词让你快速了解自己的词量，定位自己的
				学习位置。

			</view>
		</view>
		<view v-if="!list&&loading||list.length == 0&&loading"
			class="width-full box-sizing btns flex column items-center flex-center">
			<view class="marginTop-30 flex flex-center" style="width: 80vw;">
				<up-button @click="submit" size="normal" type="primary" text="去刷词"></up-button>
			</view>
		</view>
		<!-- 已经刷过词的 -->

		<view v-if="list&&list.length > 0" class="content flex column  box-sizing padding-30">
			<view class="width-full height-120 flex column flex-center fontSize-28">


				<view class="weight-700 text-center">
					全部
				</view>
				<view class="text-center">
					{{total}}个
				</view>





			</view>
			<view class="marginTop-30 flex flex-center positon-section">
				<up-button @click="clearWord" size="small" type="default" text="清库" :plain="true"></up-button>
			</view>

			<view class="flex column   fontSize-28" style="line-height: 50rpx;">
				<view @click="toPage(t,i)" class="" v-for="(t,i) in list" :key="i">
					<view class="wrapItem flex items-center space-around">
						<view style="flex: 1;" @click.stop="editTitle(t,i)"
							class="fontSize-30 weight-700 flex items-center flex-center">
							{{t.page_name}}<!-- <up-icon name="edit-pen" color="#2979ff" size="14"></up-icon> -->
						</view>
						<view style="flex: 1;" class="fontSize-28 color-6d6d6d">
							总数 : {{t.total_count}}
						</view>
						<view style="flex: 1;" class="fontSize-28 color-6d6d6d">
							已记住 : <span style="color: #26d100;">{{t.rem_count}}</span>
						</view>
						<view class="fontSize-24 color-333 borderRadius-8 flex flex-end" style="flex: 1; ">
							<view class="borderRadius-8 width-120 flex flex-center items-center"
								style="  border: 1rpx solid #b9b9b9;">
								{{t.learn_status == 0?'未开始':t.learn_status == 2?'正在学':'已学完'}}
							</view>
						</view>
					</view>

					<!-- <view class="flex space-around marginTop-50">
						<view class="flex column flex-center">
							<view class="text-center">
								已记住
							</view>
							<view class="text-center">
								{{t.jizhu}}
							</view>
						</view>
						<view class="flex column flex-center">
							<view class="text-center">
								生词
							</view>
							<view class="text-center">
								{{t.sheng}}
							</view>
						</view>
					</view> -->



				</view>
				<view class="wrapItem flex items-center space-around">
					<view style="flex: 1;" class="fontSize-30 weight-700 flex items-center flex-center">
						第{{pageVal}}页
					</view>
					<view style="flex: 1;" class="fontSize-28 color-6d6d6d">
						总数 : -
					</view>
					<view style="flex: 1;" class="fontSize-28 color-6d6d6d">
						已记住 : <span style="color: #26d100;">-</span>
					</view>
					<view class="fontSize-24 color-333 borderRadius-8 flex flex-end" style="flex: 1; ">
						<view class="borderRadius-8 width-120 flex flex-center items-center"
							style="  border: 1rpx solid #b9b9b9;">
							未解锁
						</view>
					</view>
				</view>

			</view>
			<up-modal :show="editShow" showCancelButton @close="cancel" @cancel="cancel" @confirm="setTitle"
				title="名称修改">
				<view class="slot-content">
					<up-input maxlength="6" v-model="defaultTitle" border="bottom" placeholder="最多6个字"></up-input>
				</view>
			</up-modal>
			<up-modal :show="clearShow" showCancelButton @close="noClear" @cancel="noClear" @confirm="doClear"
				title="清库">
				<view class="slot-content">
					你已经给单词安家了，你想给它们安个新家吗？很辛苦的哦！
				</view>
			</up-modal>

			<view class="flex flex-center items-center fontSize-24 color-6d6d6d" style="flex: 1;">
				分区记忆法,解决单词难记问题
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const memoryMethodindexApi = inject('memoryMethodindex');
	const cleanReciteWordsApi = inject('cleanReciteWords');

	const info = uni.getStorageSync('loginParam');
	const loading = ref(false)
	const total = ref(0)
	const editShow = ref(false);
	const clearShow = ref(false);

	const defaultTitle = ref('');
	const isJy = ref(1)
	const pageVal = ref(0)

	const list = ref([])
	onLoad((op) => {
		isJy.value = op.isJy ? op.isJy : 1
		console.log('isJy.value', isJy.value)
	})
	const memoryMethodindex = () => {
		memoryMethodindexApi({
			// wordId:'w'
		}).then(res => {
			console.log(res, 'listlistlistlistlist')
			loading.value = true;
			list.value = res.list;
			if (list.value && list.value.length > 0) {
				const lastItem = list.value[list.value.length - 1];
				pageVal.value = lastItem.page ? lastItem.page + 1 : 1;
			} else {
				pageVal.value = 1;
			}
			console.log(pageVal.value, 'pageVal.value');
			total.value = res.count ? res.count : 0;
			setTimeout(() => {
				loading.value = false;
			}, 500)
		})
	}
	memoryMethodindex();
	const submit = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
	const editTitle = (t, i) => {
		editShow.value = true
	}
	const cancel = () => {
		editShow.value = false
	}
	const setTitle = () => {
		editShow.value = false
	}
	const noClear = () => {
		clearShow.value = false
	}
	const doClear = () => {

		cleanReciteWordsApi({

		}).then(res => {
			clearShow.value = false
			uni.navigateTo({
				url: '/pages/index/index'
			})

		})


	}
	const clearWord = () => {
		clearShow.value = true

	}

	// const toPage = (t, i) => {
	// 	if (t.qu_num > 4) {
	// 		uni.navigateTo({
	// 			url: '/pages/index/memoryMethod?page=' + t.page + '&pageVal=' + t.page_name + '&qu_num=' + t
	// 				.qu_num + '&isJy=' + isJy.value
	// 		})
	// 	} else {
	// 		uni.navigateTo({
	// 			url: '/pages/index/memoryMethod2?page=' + t.page + '&pageVal=' + t.page_name + '&qu_num=' + t
	// 				.qu_num + '&isJy=' + isJy.value
	// 		})
	// 	}
	// }
	const toPage = (t, i) => {
		uni.navigateTo({
			url: '/pages/index/memoryMethod2?page=' + t.page + '&pageVal=' + t.page_name + '&qu_num=' + t
				.qu_num + '&isJy=' + isJy.value
		})
		// if (t.qu_num > 4) {
		// 	uni.navigateTo({
		// 		url: '/pages/index/memoryMethod2?page=' + t.page + '&pageVal=' + t.page_name + '&qu_num=' + t
		// 			.qu_num + '&isJy=' + isJy.value
		// 	})
		// } else {
		
		// 	uni.navigateTo({
		// 		url: '/pages/index/memoryMethod?page=' + t.page + '&pageVal=' + t.page_name + '&qu_num=' + t
		// 			.qu_num + '&isJy=' + isJy.value
		// 	})
		// }
	}
</script>

<style lang="scss">
	.btns {
		padding-bottom: calc(50rpx);
	}

	.wrapItem {
		// margin-bottom: 20px; 
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		// width: calc(50% - 10px);
		border-radius: 3px;
		border-bottom: 1px solid #d2d2d2;
	}

	.defaultBorder {
		border: 1px solid #fff;
	}

	.activeBorder {
		border: 1px solid #52c9ff;
	}

	.positon-section {
		position: absolute;
		top: 3%;
		right: 8%;
	}

	::v-deep .u-button--plain.data-v-5ce41ee6 {
		border: 1px solid #b9b9b9;
	}
</style>